<template>
	<view class="main">
		<!-- <view class="nav" :style="{ height: navHeight + 'px', paddingTop: statusBarHeight + 'px' }">我的</view> -->
		<NavBar title="我的" :hasBack="false" :textcolor="'#000'"></NavBar>
		<image class="mine_bg" src="@/static/img/mine_bg.png" mode="aspectFill"></image>
		<view class="head">
			<image class="head_bg" src="@/static/img/userinfo.png" mode="aspectFill"></image>
			<image class="avatar_img" :src="userInfo.HeaderImageUrl" mode="aspectFill"></image>
			<view class="user_info">
				<view class="user_name">
					<view class="name">{{ userInfo.NickName }} [ID号:{{ userInfo.Number }}]</view>
					<view class="time" v-if="userInfo.UserType == 1 && !handleIsEndTime(userInfo.ProxyValidTime)">
						{{ userInfo.ProxyValidTime.slice(0, 10) }}到期
					</view>
					<view class="time disabled" v-if="userInfo.UserType == 1 && handleIsEndTime(userInfo.ProxyValidTime)">已到期</view>
					<view class="subBttunn" v-if="userInfo.UserType == 3" @click="$gotoUrl('/pages/selfPages/withdraw/index')">审核提现
					</view>
				</view>
				<viwe class="btn annunity" v-if="userInfo.UserType == 0">普通用户</viwe>
				<viwe class="btn annunity" v-if="userInfo.UserType == 1"
					:class="{ disabled: handleIsEndTime(userInfo.ProxyValidTime) }">年费代理</viwe>
				<viwe class="btn admin" v-if="userInfo.UserType == 3">管理员</viwe>
				<view class="foot">
					<view class="btn annunity" v-if="userInfo.UserType == 1" @click="$gotoUrl('/pages/selfPages/withdraw/index')">
						提现记录</view>
					<span v-else></span>
					<view class="loginout" @click="handleLoginOut"> 退出登录</view>
				</view>
			</view>
		</view>
		<view class="tabs">
			<view v-for="(item, index) in tabs" :class="{ tab_a: tabIndex == index }" @click="tabChange(index)" :key="index">
				{{ item }}
			</view>
		</view>
		<view class="content" :style="{ top: top + 'px' }">
			<Curriculum v-if="tabIndex == 0" @click="handleOpenAuth"></Curriculum>
			<ProxyAnnuity v-if="tabIndex == 1 && userInfo.UserType == 1"></ProxyAnnuity>
			<Proxy v-if="tabIndex == 1 && userInfo.UserType == 3"></Proxy>
			<Record ref="recordRef" v-if="tabIndex == 2"></Record>
		</view>
		<AuthPop ref="authRef" />
	</view>
</template>

<script>
import AuthPop from './components/AuthPop'
import Curriculum from './components/Curriculum.vue'
import Proxy from './components/Proxy.vue'
import ProxyAnnuity from './components/ProxyAnnuity.vue'
import Record from './components/Record.vue'
export default {
	data () {
		return {
			tabs: ['下单课程', '我的代理', '购买记录'],
			top: 200,
			tabIndex: 0
		}
	},
	computed: {
		userInfo () {
			return this.$store.state.userInfo
		}
	},
	onReady () {
		uni.createSelectorQuery().select(".tabs").boundingClientRect().exec(res => {
			this.top = res[0].height + res[0].top
		})
	},
	methods: {
		//控制
		setTabs (val) {
			this.tabIndex = val
		},
		//打开权限提示
		handleOpenAuth () {
			this.$refs.authRef.open()
		},
		//切换
		tabChange (index) {
			if (index == 1 && this.userInfo.UserType == 0) {
				return this.handleOpenAuth()
			}
			this.tabIndex = index
		},
		//是否过期
		handleIsEndTime (time) {
			return new Date(time).getTime() < new Date().getTime()
		},
		//退出登录
		handleLoginOut () {
			uni.showModal({
				title: '提示',
				content: '确定退出登录？',
				success: (res) => {
					if (res.confirm) {
						uni.showToast({ title: "退出成功" })
						setTimeout(() => {
							uni.removeStorageSync('userInfo');
							uni.reLaunch({
								url: "/pages/index/noLogin"
							})
						}, 1000);

					} else if (res.cancel) {
						console.log('取消');
					}
				}
			});

		}
	},
	components: {
		AuthPop,
		Curriculum,
		ProxyAnnuity,
		Proxy,
		Record
	},
	// 分享到朋友圈
	onShareTimeline: function (res) {
		return {
			title: '我正在使用丫题丫代理商系统，快来和我一起使用吧！',
			path: '/pages/index/index'
		}
	},
	onShareAppMessage () {
		return {
			path: `/pages/index/index`
		};
	}
}
</script>

<style lang="scss" scoped>
.main {
	width: 100%;
	min-height: 100vh;
	overflow: hidden;
	background: linear-gradient(360deg, #F6F8FC 0%, #F6F8FC 12%, #F2F2F2 100%);
	position: relative;

	.mine_bg {
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
		top: 0;
		z-index: -1;
	}
}

.head {
	width: 694rpx;
	height: 166rpx;
	border-radius: 12rpx;
	margin: 36rpx auto 0;
	display: flex;
	padding: 20rpx 24rpx;
	box-sizing: border-box;
	position: relative;
	// background: url('@/static/img/userinfo.png') no-repeat;
}

.head_bg {
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
}

.head .avatar_img {
	width: 52rpx;
	height: 52rpx;
	border-radius: 50%;
	border: 2rpx solid #FFFFFF;
	flex-shrink: 0;
	z-index: 9;
}

.user_time {
	font-weight: bold;
	font-size: 22rpx;
	color: #F1D085;
	position: absolute;
	top: 12rpx;
	right: 28rpx;
}

.user_info {
	width: 100%;
	/* overflow: hidden; */
	margin-left: 22rpx;
	z-index: 9;
	position: relative;

	.foot {

		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;

		.loginout {
			color: #fff;
			font-size: 24rpx;
			z-index: 111;
		}
	}

}

.user_name {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;

	.name {
		font-weight: bold;
		font-size: 28rpx;
		color: #FFFFFF;
	}

	.time {
		font-weight: 500;
		font-size: 26rpx;
		color: #F1D085;
	}

	.time.disabled {
		color: #BFBFBF;
	}

	.subBttunn {
		padding: 8rpx 16rpx;
		background: linear-gradient(180deg, #1946F9 0%, #0F67FF 100%);
		border-radius: 8rpx;
		font-weight: bold;
		font-size: 22rpx;
		color: #FFFFFF;
	}
}

.btn {
	display: inline-block;
	font-size: 20rpx;
	color: #FFFFFF;
	line-height: 33rpx;
	padding: 2rpx 18rpx 2rpx 14rpx;
	margin-top: 8rpx;
	border-radius: 0 50rpx 50rpx 0;

	/* transform: skewX(-15deg); */
	&.annunity {
		background: linear-gradient(180deg, #1946F9 0%, #0F67FF 100%);
	}

	&.admin {
		background: linear-gradient(180deg, #F3AA4B 0%, #FFCF5E 100%);
	}

	&.disabled {
		background: #BFBFBF;
	}
}

.user_text {
	width: 100%;
	font-size: 24rpx;
	color: #FFFFFF;
	margin-top: 8rpx;
}

.tabs {
	width: 694rpx;
	height: 104rpx;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom: 2rpx solid #E5E5E5;
}

.tabs view {
	padding: 0 16rpx;
	line-height: 104rpx;
	font-weight: bold;
	font-size: 28rpx;
	color: #606060;
	position: relative;
}

.tabs .tab_a {
	color: #000000;
	font-size: 32rpx;
}

.tabs .tab_a::after {
	content: '';
	width: 48rpx;
	height: 12rpx;
	background: linear-gradient(90deg, #1946F9 0%, #0F67FF 100%);
	border-radius: 200rpx;
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
}

.content {
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	overflow: auto;
}
</style>